<template>
  <div class="mallInfo">
    <!-- 新增用户对话框 -->
    <el-dialog :title="operateType == 'add' ? '新增商品' : '更新商品'" :visible.sync="isShow">
      <common-form :formLabel="operateFormLabel" :form="operateForm" :inline="true" ref="form"></common-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- mallInfo头部 -->
    <div class="manage-header">
      <!-- User头部--新增按钮 -->
      <el-button type="primary" @click="addPhone">+ 新增</el-button>
      <!-- User头部--搜索表单 -->
      <common-form :formLabel="formLabel" :form="searchForm" :inline="true" ref="form">
        <el-button type="primary" @click="getList(searchForm.keyword)">搜索</el-button>
      </common-form>
    </div>
    <!-- 手机信息 -->
    <div style="height: 100vh">
      <common-table :tableData="tableData" :tableLabel="tableLabel" :config="config" @changePage="getList()" @edit="editPhone" @del="delPhone"></common-table>
    </div>
  </div>
</template>

<script>
import commonForm from '@/components/commomForm.vue'
import commonTable from '@/components/commonTable.vue'
import { getPhoneList } from '@/api/data'
export default {
  name: 'mallInfo',
  components: {
    commonForm,
    commonTable
  },
  data() {
    return {
      operateType: '',
      isShow: false,
      operateFormLabel: [
        {
          model: 'model',
          label: '手机型号',
          type: 'input'
        },
        {
          model: 'data',
          label: '入库时间',
          type: 'date'
        },
        {
          model: 'count',
          label: '总库存',
          type: 'input'
        },
        {
          model: 'price',
          label: '价格（部）',
          type: 'input'
        }
      ],
      operateForm: {
        model: '',
        count: '',
        price: ''
      },
      formLabel: [
        {
          model: 'keyword',
          label: '',
          type: 'input'
        }
      ],
      searchForm: {
        keyword: ''
      },
      tableData: [],
      tableLabel: [
        {
          prop: 'id',
          label: 'ID'
        },
        {
          prop: 'model',
          label: '型号'
        },

        {
          prop: 'count',
          label: '总库存'
        },
        {
          prop: 'stock',
          label: '剩余库存'
        },
        {
          prop: 'price',
          label: '价格 / 部'
        },
        {
          prop: 'data',
          label: '最新入库时间'
        }
      ],
      config: {
        page: 1,
        total: 30
      }
    }
  },
  methods: {
    confirm() {
      if (this.operateForm === 'edit') {
        this.$http.post('/phoneInfo/edit', this.operateForm).then(res => {
          this.isShow = false
          this.getList()
        })
      } else {
        this.$http.post('/phoneInfo/add', this.operateForm).then(res => {
          this.isShow = false
          this.getList()
        })
      }
    },
    getList(id = '') {
      this.config.loading = true
      id ? (this.config.page = 1) : ''
      getPhoneList({
        page: this.config.page,
        id
      }).then(({ data: res }) => {
        this.tableData = res.list.map(item => {
          switch (item.model) {
            case 1:
              item.model = 'iphone11 proMax'
              break
            case 2:
              item.model = '华为Mate 50'
              break
            case 3:
              item.model = '三星Ultra'
              break
            case 4:
              item.model = '小米11pro'
              break
            case 5:
              item.model = '诺基亚'
              break
          }
          return item
        })

        console.log(res, 'res')
        this.config.total = res.count
        this.config.loading = false
      })
    },
    addPhone() {
      this.isShow = true
      this.operateType = 'add'
      this.operateForm = {
        model: '',
        data: '',
        count: '',
        price: ''
      }
    },
    editPhone(row) {
      this.operateType = 'edit'
      this.isShow = true
      this.operateForm = row
    },
    delPhone(row) {
      this.$confirm('此操作将永久删除该文件，是否继续','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        const id = row.id
        this.$http.post('/phoneInfo/del',{
          params:{id}
        }).then(()=>{
          this.$message({
            type:'success',
            message:'删除成功'
          })
          this.getList()
        })
      })
    },
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
